<template>
	<view class="content">
		
		<!-- #ifdef H5 -->
		<view class="title" style="padding-top: 45upx;">
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="title" style="padding-top: 100upx;">
		<!-- #endif -->
			<view class="saoma-wrap disCenter" @tap="tapSao">
				<image src="/static/index/saoma.png" class="saoma" mode=""></image>
			</view>
			<view class="sear-wrap" @tap="PageSearch">
				<image src="/static/index/search.png" class="sear" mode=""></image>
				<view class="text-white font24" style="opacity: 0.4;">
					请输入关键词
				</view>
			</view>
		</view>
		
		<view class="clearBoth"></view>
		
		<view class="index_bg" :style="{'backgroundImage':'url('+bg_1+')'}">
			<view class="titleBox">
				<view class="scrollBox" :style="{width:titleWidth}">
					<view class="titleRows" v-for="(item,index) in titleList" :key="index" @tap="thisTitle(item.id,index)">
						<view class="titleName fontSize15 textCenter" :class=" item.thisOne ? 'chooseThis':'' ">{{item.name}}</view>
						<view class="titleIcon" v-if="item.thisOne"></view>
					</view>
				</view>
				<view class="clearBoth"></view>
			</view>
			<uni-swiper-dot class="swiper" :info="bannerList" :current="current" mode="round" :dotsStyles="dotsStyles">
				<swiper class="swiper-box swiper" @change="change" autoplay="autoplay" circular="true">  
					<swiper-item v-for="(item, indexc) in bannerList" :key="indexc"  @tap="tapBanner(item)">
						<image class="swiperitem banner"  :src="item.src"/>  
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<view class="bannerIcons" >
			<uni-swiper-dot class="swipers" :info="iconList" :current="currentIcon" mode="default" :dotsStyles="dotsStyleIcon">
				<swiper class="swiper-box swipers" @change="iconChange" :autoplay="false" circular="true">  
					<swiper-item class="iconSwiper" v-for="(item, index) in iconList" :key="index">
						
						<view class="iconList" v-for="(items,indexs) in item" :key="indexs" v-if="indexs<10" @tap="tapIcon(items,indexs)">
							<image class="biggerIcon" :src="items.icon" mode=""></image>
							<view class="name textCenter fontSize12">{{items.name}}</view>
						</view>
						
						<!-- <view class="iconList" v-for="(items,indexs) in iconBottomList" :key="indexs">
							<image class="lessIcon" :src="items.icon" mode=""></image>
							<view class="name textCenter fontSize12">{{items.name}}</view>
						</view> -->
						
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<image class="bigImage" src="/static/index/kafei.png" mode="" @tap="tapAdv"></image>
		
		<view class="specialBox" :style="{'background-image':'url('+bg_2+')'}">
			<view class="special">补贴特卖</view>
			<view class="specialA">|</view>
			<view class="specialB">品质精选</view>
			<view class="clearBoth"></view>
		</view>
		
		<view class="specialList">
			<view class="specialRows" v-for="(item,index) in specialList" :key="index" @tap="btnDetails(item.id)">
				<image class="cover" :src="item.src" mode=""></image>
				<view class="name  fontSize12 textCenter overflow_one">{{item.name}}</view>
				<view class="price fontSize12 textCenter">¥ {{item.price}}</view>
			</view>
			<view class="clearBoth"></view>
		</view>
		
		<view class="typeBox">
			<view class="typeScroll" :style="{width:typeScrollWidth}">
				<view class="typeRow" v-for="(item,index) in typeList" :key="index" @tap="thisTitle(item.id,index)">
					<view class="top_title    textCenter overflow_one" :class=" item.thisOne ? 'firstType':'' ">{{item.name}}</view>
					<view class="bottom_title textCenter overflow_one" :class=" item.thisOne ? 'bottomType':'' ">{{item.dec}}</view>
				</view>
				<view class="clearBoth"></view>
			</view>
		</view>
		
		<view class="proList">
			<view class="proRows" v-for="(item,index) in rowsList" :key="index" @tap="btnDetails(item.id)">
				<image class="cover" :src="item.cover" mode=""></image>
				<view class="HisTitle fontSize14 overflow_two">{{item.title}}</view>
				<!-- <view class="typeBoxs">
					<view class="type" v-for="(items,indexs) in item.type" :key="indexs">{{items.name}}</view>
				</view> -->
				<view class="clearBoth"></view>
				<view class="priceBox">
					<view class="price">¥<view class="priceTip">{{item.price}}</view></view>
					<s class="priceBefore">¥ {{item.priceBefore}}</s>
					<view class="user">已拼{{item.use}}件</view>
					<view class="clearBoth"></view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>
<style>
	.content{padding-bottom: 50upx;background: rgb(241,241,245);margin-top: 115upx;}
	/* #ifdef H5 */
	.content .index_bg{width: 100%;height:350upx;padding-top:30upx;margin-bottom: 50upx;background-repeat: no-repeat;background-size: 100% 100%;margin-top:100upx;}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	.content .index_bg{width: 100%;height:350upx;padding-top:60upx;margin-bottom: 50upx;background-repeat: no-repeat;background-size: 100% 100%;margin-top:60upx;}
	/* #endif */
	.content .index_bg .titleBox{width: 95%;height: 60upx;margin-left: 2.5%;overflow-x: scroll;}
	.content .index_bg .titleBox .scrollBox{width: auto;height: 60upx;overflow-x: scroll;}
	.content .index_bg .titleBox .titleRows{width:150upx;float: left;}
	.content .index_bg .titleBox .titleRows .titleName{font-size: 28upx;color:white;}
	.content .index_bg .titleBox .titleRows .titleIcon{width:40%;height:6upx;margin-top: 5upx;margin-left: 30%;border-radius: 100upx;background: white;}
	.content .index_bg .titleBox .titleRows .chooseThis{font-size: 15px;}
	.content .swiper{width:100%;height:360upx;margin-top: 5upx;overflow: hidden;}
	.content .banner{width:90%;margin-left:5%;height:300upx;border-radius:10upx;}
	.content .swipers{width:95%;margin-left: 2.5%;height:300upx;margin-top:25upx;overflow: hidden;}
	.content .swipers .iconSwiper{height:300upx;display: flex;justify-content:space-around;flex-wrap: wrap;}
	.content .swipers .iconList{width: 20%;height:130upx;display: flex;justify-content:center;flex-wrap: wrap;}
	.content .swipers .biggerIcon{width: 80upx;height:80upx;margin: 0 20upx;}
	.content .swipers .lessIcon{width: 52upx;height:52upx;margin:0 10upx;}
	.content .swipers .name{}
	.content .bigImage{width:90%;height:280upx;margin:40upx 0;margin-left: 5%;border-radius: 10upx;}
	/* .content .specialBox{width:90%;padding:20upx 0 40upx 5%;margin-left: 5%;background-repeat: no-repeat;background-size: 100% 100%;} */
	.content .specialBox{width:90%;padding:20upx 0 40upx 5%;margin-left: 5%;background-repeat: no-repeat;background-size: 100% 100%;margin-top: 40upx;}
	.content .specialBox .special{font-size: 18px;color:white;float: left;}
	.content .specialBox .specialA{font-size: 14px;color:white;float: left;margin:0 20upx;margin-top: 10upx;}
	.content .specialBox .specialB{font-size: 16px;color:white;float: left;margin-top: 6upx;}
	.content .specialList{width: 90%;margin-left: 5%;position: relative;top:-20upx;background: white;border-radius:20upx;}
	.content .specialList .specialRows{width: 25%;float: left;padding-bottom: 20upx;margin-top: 20upx;display: flex;justify-content: center;flex-wrap: wrap;}
	.content .specialList .specialRows .cover{width: 130upx;height:100upx;}
	.content .specialList .specialRows .name{width: 100%;}
	.content .specialList .specialRows .price{width: 100%;color:#DC582A}
	.content .typeBox{width: 90%;margin:40upx 0;margin-left: 5%;overflow-x: scroll;}
	.content .typeBox .typeScroll{width:auto;overflow-x: scroll;}
	.content .typeBox .typeScroll .typeRow{width: 150upx;float: left;}
	.content .typeBox .typeScroll .typeRow .top_title{font-size: 32upx;color:#262626;font-weight: bold;}
	.content .typeBox .typeScroll .typeRow .bottom_title{width:130upx;margin-left: 10upx;font-size: 20upx;color:#999999;margin-top: 10upx;}
	.content .typeBox .typeScroll .typeRow .firstType{color:rgb(220,88,42)}
	.content .typeBox .typeScroll .typeRow .bottomType{color:white;background: rgb(220,88,42);border-radius: 100px;padding:0}
	.content .proList{width: 90%;margin-left: 5%;display: flex;justify-content:space-between;flex-wrap: wrap;}
	/* .content .proList .proRows{width:47.5%;margin:15upx 2.5% 15upx 0;background: red;border-radius: 10upx;padding-bottom: 10upx;} */
	.content .proList .proRows{width:48%;margin:15upx 0;background: white;border-radius: 10upx;padding-bottom: 10upx;}
	.content .proList .proRows .cover{width: 100%;height:336upx;border-radius: 10upx;}
	.content .proList .proRows .HisTitle{font-weight: bold;margin-left: 5%;height:76upx}
	.content .proList .proRows .typeBoxs{height:96upx;margin-left: 5%;}
	.content .proList .proRows .type{font-size: 20upx;float: left;margin:5upx;padding:5upx;border-radius: 10upx;color:#DC582A;background:rgb(251,238,233);}
	.content .proList .proRows .priceBox{width: 100%;margin-top: 10upx;margin-left: 5%;}
	.content .proList .proRows .priceBox .price{float:left;font-size: 24upx;color:#262626;margin-right: 5upx;font-weight: bold;font-family: hzgb;}
	.content .proList .proRows .priceBox .priceTip{float: right;margin-left:5upx;font-size: 32upx;color:#262626;margin-right: 5upx;font-weight: bold;font-family: hzgb;position: relative;top:-4upx}
	.content .proList .proRows .priceBox .priceBefore{float:left;color:#999999;font-size: 20upx;}
	.content .proList .proRows .priceBox .user{width: 95%;margin-left: 5%;float:right;font-size: 24upx;margin-right: 8%;color:#999999;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components:{
			uniSwiperDot,
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				titleList:[
					// {name:"推荐",thisOne:true},
					// {name:"餐饮",thisOne:false},
				],
				titleWidth:"",
				bannerList:[
					// {src:"/static/index/banner.png"},
					// {src:"/static/index/banner.png"},
					// {src:"/static/index/banner.png"}
				],
				current:0,
				dotsStyles:{
					bottom:40,
					backgroundColor: 'rgba(255,255,255,0.5)',
					border: '1px solid none',
					color: 'none',
					selectedBackgroundColor: 'white',
					selectedBorder: '1px none solid'
				},
				iconList:[
					[]
					// [
					// 	{icon:"/static/index/icon_1.png",name:"限时秒杀"},
					// 	{icon:"/static/index/icon_2.png",name:"投资加盟"},
					// 	{icon:"/static/index/icon_3.png",name:"网店创业"},
					// 	{icon:"/static/index/icon_4.png",name:"积分商城"},
					// 	{icon:"/static/index/icon_5.png",name:"6块8特卖"},
					// ]
				],
				iconBottomList:[
					// {icon:"/static/index/icon_6.png",name:"充值中心2222"},
					// {icon:"/static/index/icon_7.png",name:"单领果园"},
					// {icon:"/static/index/icon_8.png",name:"单领商学院"},
					// {icon:"/static/index/icon_9.png",name:"校园百货"},
					// {icon:"/static/index/icon_10.png",name:"医美生活"},
				],
				currentIcon:0,
				dotsStyleIcon:{
					bottom:0,
					backgroundColor: 'rgba(220,88,42,0.4)',
					border: '1px solid none',
					color: 'none',
					selectedBackgroundColor: 'rgb(220,88,42)',
					selectedBorder: '1px none solid'
				},
				specialList:[
					// {src:"../../static/del/del_2.png",name:"ABA1",price:"123"},
					// {src:"../../static/del/del_2.png",name:"ABA2",price:"123"},
					// {src:"../../static/del/del_2.png",name:"ABA3",price:"123"},
					// {src:"../../static/del/del_2.png",name:"ABA3",price:"123"},
				],
				typeList:[
					// {name:"好物推荐",dec:"超值特卖"},
					// {name:"餐饮",dec:"口碑优选"},
					// {name:"餐饮",dec:"口碑优选"},
					// {name:"餐饮",dec:"口碑优选"},
					// {name:"餐饮",dec:"口碑优选"},
					// {name:"餐饮",dec:"口碑优选"},
					// {name:"餐饮",dec:"口碑优选"},
					// {name:"餐饮",dec:"口碑优选"},
				],
				typeScrollWidth:"",
				rowsList:[
					// {cover:"../../static/del/del_3.png",title:"描述述描述述描述述描述述描述述描述述",price:"1",priceBefore:"12",use:"123",type:[{name:"旗舰店"},{name:"退货包运费"},{name:"退货包运费"}]},
					// {cover:"../../static/del/del_3.png",title:"描述述描述述描述述描述述描述述描述述",price:"1",priceBefore:"12",use:"123",type:[{name:"旗舰店"},{name:"退货包运费"}]},
					// {cover:"../../static/del/del_3.png",title:"描述述描述述描述述描述述描述述描述述",price:"1",priceBefore:"12",use:"123",type:[{name:"旗舰店"},{name:"退货包运费"},{name:"退货包运费"}]}
				],
				bg_1:"https://mp.darling.org.cn/index.bg_1.png",
				bg_2:"https://mp.darling.org.cn/index.bg_2.png",
				pages:1,
				
			}
		},
		onLoad() {
			this.AjaxLoad()
		},
		onReachBottom(){
			this.pages++
			this.AjaxLoadGoods()
		},
		onPullDownRefresh() {
			
		},
		methods: {
			AjaxLoad(){
				var bannerList = [],typeList = [],iconList = [],specialList = [],titleList = [],goodsId = "",storeId = ""
				let param={};
				this._$InitRequest.request('Index/indexinfo', param).then(res => {
					//banner
					res.data.banner_arr.forEach( (item) =>{
						if( item.canshu.split(":")[0] == 1 ){
							goodsId = item.canshu.split(":")[1]
						}else if( item.canshu.split(":")[0] == 2 ){
							storeId = item.canshu.split(":")[1]
						}
						bannerList.push({
							goodsId:goodsId,
							storeId:storeId,
							canshu:item.canshu,
							src:item.pic,
						})
					})
					for (var i = 0; i < bannerList.length; i++){this.bannerList.push( bannerList[i] )}
					
					
					//typeList
					res.data.category_list.forEach( (item,index) =>{
						var thisOne = false
						if( index == 0 )thisOne = true
						typeList.push({
							id:item.id,
							name:item.cate_name,
							dec:item.cate_desc,
							thisOne:thisOne,
						})
					})
					for (var i = 0; i < typeList.length; i++){this.typeList.push( typeList[i] )}
					
					
					//titleList
					res.data.category_list.forEach( (item,index) =>{
						var thisOne = false
						if( index == 0 )thisOne = true
						titleList.push({
							id:item.id,
							name:item.cate_name,
							thisOne:thisOne,
						})
					})
					for (var i = 0; i < titleList.length; i++){this.titleList.push( titleList[i] )}
					
					
					//iconList
					res.data.icon_list.forEach( (item) =>{
						iconList.push({
							id:item.id,
							category_id:item.category_id,
							icon:item.img,
							name:item.name,
							type:item.type,
							link:item.link,
						})
					})
					for (var i = 0; i < iconList.length; i++){this.iconList[0].push( iconList[i] )}
					
					
					//specialList
					res.data.special_sale.forEach( (item) =>{
						specialList.push({
							id:item.id,
							src:item.thumb_url,
							name:item.goods_name,
							price:item.market_price,
						})
					})
					for (var i = 0; i < specialList.length; i++){this.specialList.push( specialList[i] )}
					
					this.AjaxLoadGoods()
					this.computeTitleWidth()
				},error=>{})
			},
			computeTitleWidth(){
				
				this.titleWidth = this.titleList.length * 85 + "px"
				this.typeScrollWidth = this.typeList.length * 85 + "px"
			},
			AjaxLoadGoods(){
				var cate_id = "",rowsList = []
				for (var i = 0; i < this.typeList.length; i++) {
					if( this.typeList[i].thisOne == true )cate_id = this.typeList[i].id
				}
				let param={
					page:this.pages,
					cate_id:cate_id,
					type:0
				};
				this._$InitRequest.request('Index/getgoodlst', param).then(res => {
					res.data.goodres.forEach( (item) =>{
						rowsList.push({
							id:item.id,
							cover:item.thumb_url,
							title:item.goods_name,
							price:item.min_price,
							priceBefore:item.market_price,
							use:item.pin_sale,
						})
					})
					for (var i = 0; i < rowsList.length; i++){this.rowsList.push( rowsList[i] )}
				},error=>{})
			},
			change(e){this.current = e.detail.current},
			iconChange(e){this.currentIcon = e.detail.current},
			thisTitle(id,index){
				uni.showLoading({
					title:"加载中..."
				})
				for (var i = 0; i < this.titleList.length; i++) {
					this.titleList[i].thisOne = false
				}
				for (var i = 0; i < this.typeList.length; i++) {
					this.typeList[i].thisOne = false
				}
				this.titleList[index].thisOne = true
				this.typeList[index].thisOne = true
				this.rowsList = []
				this.pages = 1
				this.AjaxLoadGoods()
				setTimeout(()=>{
					uni.hideLoading()
				},500)
			},
			PageSearch(){
				uni.navigateTo({
					url:"/pages_index/pages/search/search"
				})
			},
			btnDetails(e){
				uni.navigateTo({
					url:"/pages_index/pages/details/details?id=" + e
				})
			},
			tapBanner(e){
				if( e.goodsId ){
					uni.navigateTo({
						url:"/pages_index/pages/details/details?id=" + e.goodsId
					})
				}
				if( e.storeId ){
					uni.navigateTo({
						url:"/pages_index/pages/store_home/store_home?id=" + e.storeId
					})
				}
			},
			tapIcon(item,index){
				// 类型 1链接 2商品分类 3单领商学院 4限时秒杀 5投资加盟 6网店创业 7积分商城 8充值中心
				console.log(item)
				if( item.type == 1 ){
					
				}else if( item.type == 2 ){
					uni.navigateTo({
						url:"/pages_type/pages/typeList/typeList?searchValue=" + item.name + "&id=" + item.category_id
					})
				}else if( item.type == 3 ){
					uni.navigateTo({
						url:"/pages/other/college/college"
					})
				}else if( item.type == 4 ){
					uni.navigateTo({
						url:"/pages_index/pages/seckill/seckill"
					})
				}else if( item.type == 5 ){
					uni.navigateTo({
						url:"/pages/other/join/join"
					})
				}else if( item.type == 6 ){
					uni.navigateTo({
						url:"/pages/other/Entrepreneurship/Entrepreneurship"
					})
				}else if( item.type == 7 ){
					//没有
				}else if( item.type == 8 ){
					uni.navigateTo({
						url:"/pages_mine/pages/wallet/wallet"
					})
				}
			},
			tapAdv(){
				uni.navigateTo({
					url:"/pages_index/pages/index"
				})
			},
			tapSao(){
				var that = this;
				uni.scanCode({
					success:function(res){
						uni.navigateTo({
							url:"/pages_kafei/pages/kafeiList_son/kafeiList_son?machine_code=" + JSON.stringify(res.result).split("&machineCode=")[1].split("&")[0]
						})
						console.log( JSON.stringify(res.result).split("&machineCode=")[1].split("&")[0] );
					}
				});
			},
			
			
			
			
			
			
		}
	}
</script>
<style lang="less">
	.title{
		display: flex;
		align-items: center;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		/* #ifdef MP-WEIXIN */
		padding-right: 220upx;
		/* #endif */
		background-color: #DC582A;
		.saoma-wrap{
			padding: 10upx 30upx;
			.saoma{
				width: 44upx;
				height: 44upx;
			}
		}
		.sear-wrap{
			width: 100%;
			height: 66upx;
			background: #e06940;
			border-radius: 33upx;
			display: flex;
			padding: 10upx 20upx;
			align-items: center;
			.sear{
				width: 24upx;
				height: 24upx;
				margin-right: 12upx;
			}
		}
	}
</style>
